<style>
.luck {
  position: relative;
  margin: 1rem;
}
.luck:before {
   content: ' ';
   display: block;
   position: absolute;
   width: 5rem;
   height: 5rem;
   top: 0;
   left: 0;
   transform: rotate(45deg);
   background: red;
   z-index: 0;
}
.luck > span {
  display: block;
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  position: relative;
  color: yellow;
  font-size: 1.2rem;
  z-index: 1;
  position: relative;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div class="box">
          <div class="luck"><span>LUCK</span></div>
        </div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;luck&quot;&gt;&lt;span&gt;LUCK&lt;/span&gt;&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.luck {
  position: relative;
}
.luck:before {
   content: ' ';
   display: block;
   position: absolute;
   width: 5rem;
   height: 5rem;
   top: 0;
   left: 0;
   transform: rotate(45deg);
   background: red;
   z-index: 0;
}
.luck > span {
  display: block;
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  position: relative;
  color: yellow;
  font-size: 1.2rem;
  z-index: 1;
  position: relative;
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
